import React, { useState } from 'react'
import { Input, List, message, Button } from 'antd'
import { nanoid } from 'nanoid'
import { DeleteOutlined } from '@ant-design/icons'

import TodoItem from '../todo-item'

import './index.less'

interface todo {
    id: string,
    text: string,
    checked: boolean,
    isEditable: boolean
}

export default function Todo() {

    const [addText, setAddText] = useState('')
    const [todoList, setTodoList] = useState([] as todo[])
    // const [todoList, setTodoList] = useState([{ id: '001', text: '张三', checked: false }])

    // 处理input框输入
    const handleChange = e => {
        setAddText(e.target.value)
    }

    // input框回车事件
    const handleKeyDown = e => {
        if (e.keyCode === 13) {
            let value = e.target.value.trim()
            if (!value) {
                message.warning('请输入文本后再添加!')
                return
            }
            const newList = [
                { id: nanoid(), text: value, checked: false, isEditable: false },
                ...todoList
            ]
            setTodoList(newList)
            setAddText('')
        }
    }

    // 修改选中项
    const changeCheck = (id: string, checkValue: boolean) => {
        let _todoList = JSON.parse(JSON.stringify(todoList))
        let index = _todoList.findIndex(ele => ele.id === id)
        _todoList[index].checked = checkValue
        setTodoList(_todoList)
    }

    // 编辑框开启
    const editItem = (id: string) => {
        let _todoList = JSON.parse(JSON.stringify(todoList))
        let index = _todoList.findIndex(ele => ele.id === id)
        _todoList[index].isEditable = true
        setTodoList(_todoList)
    }

    // 编辑
    const changeText = (id: string, value: string) => {
        let _todoList = JSON.parse(JSON.stringify(todoList))
        let index = _todoList.findIndex(ele => ele.id === id)
        _todoList[index].text = value
        setTodoList(_todoList)
    }

    // 取消编辑
    const cancelEdit = (id: string) => {
        console.log('hhh')
        let _todoList = JSON.parse(JSON.stringify(todoList))
        let index = _todoList.findIndex(ele => ele.id === id)
        _todoList[index].isEditable = false
        setTodoList(_todoList)
    }

    // 删除某一项
    const deleteItem = (id: string) => {
        let _todoList = todoList.filter(ele => ele.id !== id)
        setTodoList(_todoList)
        message.success('删除成功!')
    }

    // 批量删除
    const mulDelete = () => {
        let quantity = todoList.reduce((pre, item) => {
            return item.checked ? pre + 1 : pre
        }, 0)

        if (!quantity) {
            message.warning('请选择您要删除的选项!')
            return
        }

        let _todoList = todoList.filter(ele => !ele.checked)
        setTodoList(_todoList)
        message.success('删除成功!')
    }

    return (
        <div className='todo-wrapper clearfix'>
            <h2 className='todo-title'>Todo List</h2>
            <Input
                value={addText}
                onChange={handleChange}
                placeholder='Add a task'
                onKeyDown={handleKeyDown}
            />
            <List
                header={
                    !!todoList.length && (
                        <div style={{ display: 'flex', flexDirection: 'row-reverse' }}>
                            <Button onClick={mulDelete} type='primary' danger icon={<DeleteOutlined />}>批量删除</Button>
                        </div>
                    )
                }
                dataSource={todoList}
                renderItem={item => (
                    <>
                        <TodoItem
                            {...item}
                            changeCheck={changeCheck}
                            deleteItem={deleteItem}
                            editItem={editItem}
                            changeText={changeText}
                            cancelEdit={cancelEdit}
                        />
                    </>
                )}
                style={{
                    padding: '10px 20px'
                }}
            />
        </div>
    )
}